<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script type="text/javascript" src="/ui/jquery.min.js"></script>
	<script>
		function qq(value, name) {
			alert(value + ":" + name)
		}
	</script>
	<style>
		/* 总体布局 */
		#container {
			margin: 0 auto;
			padding: 20px;
			background-color: #f2f2f2;
		}

		/* 搜索框一行开始 */
		#searchBox {
			background-color: pink;
			height: 40px;
			padding-left: 20px;
		}

		/* input，button修饰开始 */
		.search {
			height: 100%;
			vertical-align: bottom;
			box-sizing: border-box;
		}
		
		.search-btn {
			background-color: #009688;
			border: none;
			color: #fff;
			font-weight: 700;
		}
		/* input，button修饰结束 */
		/* 搜素框一行结束 */
		/* 显示证书开始 */
		#showCertificate {
			background-color: skyblue;
			margin: 10px auto;
			height: 500px;
		}

		/* 显示证书结束 */
		td {
			height: 300px;
			width: 70px;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div id="container">
		<!-- 搜索框一行开始 -->
		<div id="searchBox">
			<input class="search" placeholder="请输入关键字" /><button class="search search-btn">搜索</button>
		</div>
		<!-- 搜索框一行结束 -->
		<!-- 展示证书开始 -->
		<div id="showCertificate">
			<table cellspacing="100px" border="1px" height="100%" width="100%">
				<tbody>
<!-- 					<tr> -->
<!-- 						<td><iframe height="100%" type="application/pdf" width="100%" src="usingthymeleaf.pdf"></iframe></td> -->
<!-- 						<td><iframe height="100%" type="application/pdf" width="100%" src="usingthymeleaf.pdf"></iframe></td> -->
<!-- 						<td><iframe height="100%" type="application/pdf" width="100%" src="usingthymeleaf.pdf"></iframe></td> -->
<!-- 						<td><iframe height="100%" type="application/pdf" width="100%" src="usingthymeleaf.pdf"></iframe></td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><iframe height="100%" type="application/pdf" width="100%" src="usingthymeleaf.pdf"></iframe></td> -->
<!-- 						<td><iframe height="100%" type="application/pdf" width="100%" src="usingthymeleaf.pdf"></iframe></td> -->
<!-- 						<td><iframe height="100%" type="application/pdf" width="100%" src="usingthymeleaf.pdf"></iframe></td> -->
<!-- 						<td><iframe height="100%" type="application/pdf" width="100%" src="usingthymeleaf.pdf"></iframe></td> -->
<!-- 					</tr> -->
				</tbody>
			</table>
		</div>
		<!-- 展示证书结束 -->
	</div>
</body>
<script>
	$(function () {
		// 一行显示4个，如果多余四个，新建一行
		function addTr(array) {
			var trStart = '<tr>';
			var tdStart = '<td><iframe height="100%" type="application/pdf" width="100%" src=';
			var tdEnd = '></iframe></td>';
			var trEnd = '</tr>';
			var pathString = '';
			/*
			1. 一行显示4个td，判断后台的pdf是否可以在td中足够显示
			*/
			var record = array.length / 4;
			var length = array.length % 4 == 0 ? record : record + 1;
			// 总共创建length个tr，一个循环创建一个tr
			for (var i = 0; i < length; i++) {
				var count = 0; // 记录路径在数组中的位置
				pathString = trStart;
				// 一个tr中创建4个td
				for (var i = 0; i < 4; i++) {
					if(count >= array.length) {
						break;
					}
					var pdfPath = array[count].certificate_path;
					// 获取后台传送的路径，写进tbody
					// 
					pathString += tdStart + pdfPath + tdEnd;
					count++;
				}
				pathString += trEnd;
			}
			// 把拼接的字符串追加到表格中
			$("tbody").append(pathString);
		}
		$.ajax({
			url: '/systemManage/teamCertificate.action',
			dataType: 'json',
			contentType: 'utf-8',
			success: function (data) {
				addTr(data.all);
			}
		});
	});
</script>
</html>